import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { Card, Descriptions, Button } from "antd";
import { getById } from "@/api/hosp/hospital";

function HospitalShow() {
	const params = useParams();
	const navigate = useNavigate();

	const [hospital, setHospital] = useState<any>({ param: {} });
	const [bookingRule, setBookingRule] = useState<any>({ rule: [] });

	useEffect(() => {
		const getHospital = async () => {
			const data = await getById(params.id as string);
			setHospital(data.hospital);
			setBookingRule(data.bookingRule);
		};
		getHospital();
	}, []);

	return (
		<Card>
			<Descriptions title="基本信息" bordered>
				<Descriptions.Item label="医院名称" span={2}>
					{hospital.hosname} | {hospital.param.hostypeString}
				</Descriptions.Item>
				<Descriptions.Item label="医院logo" span={2}>
					<img
						style={{ width: 100, height: 100 }}
						src={"data:image/jpeg;base64," + hospital.logoData}
						alt="logo"
					/>
				</Descriptions.Item>
				<Descriptions.Item label="医院编码" span={2}>
					{hospital.hoscode}
				</Descriptions.Item>
				<Descriptions.Item label="医院地址" span={2}>
					{hospital.param.fullAddress}
				</Descriptions.Item>
				<Descriptions.Item label="坐车路线" span={4}>
					{hospital.route}
				</Descriptions.Item>
				<Descriptions.Item label="医院简介" span={4}>
					{hospital.intro}
				</Descriptions.Item>
			</Descriptions>

			<Descriptions title="预约规则信息" bordered style={{ marginTop: 30 }}>
				<Descriptions.Item label="预约周期" span={2}>
					{bookingRule.cycle}天
				</Descriptions.Item>
				<Descriptions.Item label="放号时间" span={2}>
					{bookingRule.releaseTime}
				</Descriptions.Item>
				<Descriptions.Item label="停挂时间" span={2}>
					{bookingRule.stopTime}
				</Descriptions.Item>
				<Descriptions.Item label="退号时间" span={2}>
					{bookingRule.quitTime}
				</Descriptions.Item>
				<Descriptions.Item label="预约规则" span={4}>
					{bookingRule.rule.map((item: any, index: number) => {
						return (
							<div>
								{index + 1}.{item}
							</div>
						);
					})}
				</Descriptions.Item>
			</Descriptions>

			<Button
				style={{ marginTop: 20 }}
				onClick={() => navigate("/hosp/hospital/list")}
			>
				返回
			</Button>
		</Card>
	);
}

export default HospitalShow;
